import React from 'react'
import classNames from 'classnames'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faTimes} from '@fortawesome/free-solid-svg-icons'
import './TabList.scss'

export default ({files, activeId, unsavedIds = [], onTabClick, onCloseTab}) => {
  return (
    <ul className="nav nav-pills tables-component">
      {files.map(file => {
        const unsavedMark = unsavedIds.includes(file.id)
        const fClassName = classNames({
          'nav-link': true,
          'active': file.id === activeId,
          'withUnsaved': unsavedMark
        })

        return (
          <li className="nav-item" key={file.id}>
            <a href="#" className={fClassName}
               onClick={(e) => {
                 e.preventDefault();
                 onTabClick(file.id)
               }}
            >
              {file.title}
              <span className="ml-2 close-icon" onClick={(e) => {
                e.stopPropagation();
                onCloseTab(file.id)
              }}
              >
                <FontAwesomeIcon icon={faTimes}/>
              </span>
              {unsavedMark && <span className="rounded-circle ml-2 unsaved-icon"/>}
            </a>
          </li>
        )
      })}
    </ul>
  )
}
